<template>
  <div>
    <div class="max-w-lg">
      <!-- <div class=" bg-gray-500 w-full h-50"></div> -->
      <div
        class="
          max-w-xl
          mx-auto
          bg-white
          rounded-2xl
          shadow-2xl
          overflow-auto
          shadow-2xl
        "
      >
        <img
          class="h-48 w-full object-fill"
          src="../assets/svg.png"
          alt="Man looking at item at a store"
        />
        <div class="p-8">
          <div
            class="
              uppercase
              tracking-wide
              text-sm text-indigo-500
              font-semibold
              text-lg
              font-bold
            "
          >
            注册
          </div>

          <div class="pt-5 pb-5 space-y-4">
            <el-input v-model="username" placeholder="请输入用户名"></el-input>
            <!-- <p>{{username}}</p> -->
            <el-input v-model="email" placeholder="请输入邮箱"></el-input>
            <el-input
              v-model="phonenumber"
              placeholder="请输入手机号码"
            ></el-input>
            <el-input
              v-model="password"
              show-password
              placeholder="请输入密码"
            ></el-input>
            <el-input v-model="avatar" placeholder="请输入头像地址"></el-input>
          </div>

          <div class="flex justify-between">
            <el-button @click="userRegister" type="primary">注册用户</el-button>
            <el-button @click="gotoLogin" type="warning">返回登陆</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
import { requests } from "../network/request";
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      email: "",
      phonenumber: "",
      avatar: "",
    };
  },
  methods: {
    userRegister: function () {
      if (this.username == null || this.username == "") {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
        });
      } else if (this.email == null || this.email == "") {
        this.$message({
          message: "邮箱不能为空",
          type: "warning",
        });
      } else if (this.phonenumber == null || this.phonenumber == "") {
        this.$message({
          message: "手机号不能为空",
          type: "warning",
        });
      } else if (this.password == null || this.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
      } else {
        requests({
          url: "register",
          method: "post",
          data: {
            userName: this.username,
            passWord: this.password,
            email: this.email,
            phoneNumber: this.phonenumber,
            avatar: this.avatar
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.$router.push("/loginpage/login");
            } else if (res.data.code == 500) {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    gotoLogin: function () {
      this.$router.push("/loginpage/login");
    },
  },
};
</script>
<style scoped>
</style>